<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <%-- 页头 --%>
    <title>视频教程 - ReadJava教程</title>
    <%@include file="../common/head.jsp" %>
    <link rel="stylesheet" href="/resources/editor/css/editormd.css"/>

</head>
<body>
<div class="wrapper">

    <%-- 导航 --%>
    <%@include file="../common/header.jsp" %>

    <%-- 侧边栏 --%>
    <div class="sidebar">
        <div class="scrollbar-inner sidebar-wrapper">
            <ul class="nav">
                <c:forEach items="${videoStatusVoList}" var="vo">
                    <li class="nav-item" id="${vo.videoCategory.vcId}">
                        <a href="javascript:void(0);">
                            <i class="la ${vo.videoCategory.vcIcon}"></i>
                            <p>${vo.videoCategory.vcTitle}</p>
                            <c:choose>
                                <c:when test="${vo.buyStatus == 200}">
                                    <span class="badge badge-success">学</span>
                                </c:when>
                            </c:choose>
                        </a>
                    </li>
                </c:forEach>
            </ul>
        </div>
    </div>

    <div class="main-panel">
        <div class="content">
            <div class="container-fluid">
                <c:forEach items="${videoStatusVoList}" var="vo" varStatus="status">
                    <div class="row vcList" id="a-${vo.videoCategory.vcId}">
                        <div class="col-md-12">
                            <div class="card">
                                <div class="card-body">
                                    <div id="test-editormd-view-${status.index}" class="test-editormd-view-count">
                                    <textarea style="display:none;"
                                              name="test-editormd-markdown-doc">${vo.videoCategory.vcContent}</textarea>
                                    </div>
                                </div>
                                <div class="card-footer">
                                    <c:choose>
                                        <c:when test="${vo.buyStatus == 200}">
                                            <button class="btn btn-success btn-sm"
                                                    onclick="window.location.href='/user/video/detail/${vo.videoCategory.vcId}'">
                                                开始学习
                                            </button>
                                        </c:when>
                                        <c:when test="${vo.buyStatus == 100}">
                                            <button class="btn btn-danger btn-sm"
                                                    onclick="window.location.href='/alipay/page/gotoPayPage?videoId=${vo.videoCategory.vcId}'">
                                                购买教程
                                            </button>
                                            <span class="badge badge-count">${vo.videoCategory.vcPrice}</span>
                                        </c:when>
                                    </c:choose>
                                </div>
                            </div>
                        </div>
                    </div>
                </c:forEach>
            </div>
        </div>

        <%-- 页脚 --%>
        <%@include file="../common/footer.jsp" %>

    </div>
</div>

</body>

<%-- js --%>
<%@include file="../common/script.jsp" %>
<script src="/resources/editor/lib/marked.min.js"></script>
<script src="/resources/editor/lib/prettify.min.js"></script>
<script src="/resources/editor/lib/raphael.min.js"></script>
<script src="/resources/editor/lib/underscore.min.js"></script>
<script src="/resources/editor/lib/sequence-diagram.min.js"></script>
<script src="/resources/editor/lib/flowchart.min.js"></script>
<script src="/resources/editor/lib/jquery.flowchart.min.js"></script>
<script src="/resources/editor/editormd.min.js"></script>

<script>
    $(function () {
        var count = $(".test-editormd-view-count").length;
        for (var i = 0; i < count; i++) {
            var testEditormdView;
            testEditormdView = editormd.markdownToHTML("test-editormd-view-" + i, {
                emoji: true,
                taskList: true,
                tex: true,  // 默认不解析
                flowChart: true,  // 默认不解析
                sequenceDiagram: true,  // 默认不解析
            });
        }

        $(".nav>li:first").addClass('active');
        $(".nav>li").on("click", function () {
            $(this).siblings('li').removeClass('active');
            $(this).addClass('active');
            var acId = $(this).attr("id");
            $(".vcList").each(function () {
                if ('a-' + acId == $($(this))[0].id) {
                    $(this).show();
                } else {
                    $(this).hide();
                }
            });
        });
    });
</script>
</html>